<template>
  <rx-dialog @handOk="handleSubmit" @cancel="cancel">
    <rx-layout>
      <div slot="center">
        <a-form :form="form">
          <a-form-item style="display:none">
            <a-input v-decorator="['id']" />
            <a-input v-decorator="['isSystem']" />
            <a-input v-decorator="['isDefault']" />
          </a-form-item>
          <a-row>
            <a-col :span="12">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.relName','关系名')">
                  <rx-input-i18n :placeholder="i18n('form.relName','关系名','input')"
                                 v-decorator="['i18nJson', {rules: [{required: true, message: i18n('form.relName','关系名','input')}]}]"
                  />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.alias','别名')">
                <a-input
                  :placeholder="i18n('form.alias','别名','input')"
                  v-decorator="['key', {rules: [{required: true, message: i18n('form.alias','别名','input')}]}]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.relType','关系类型')">
                <a-select
                  :placeholder="i18n('form.relType','关系类型','input')"
                  v-decorator="['relType', { rules: [{required: true, message: i18n('form.relType','关系类型','input')}] }]"
                  :getPopupContainer="p=>p.parentNode"
                  @change="typeChange"
                >
                  <a-select-option value="USER-USER">{{i18n('form.USER_USER','用户间关系')}}</a-select-option>
                  <a-select-option value="GROUP-USER">{{i18n('form.GROUP_USER','用户与组关系')}}</a-select-option>
                  <a-select-option value="GROUP-GROUP">{{i18n('form.GROUP_GROUP','用户组间关系')}}</a-select-option>
                  <a-select-option value="REL-USER">{{i18n('form.REL_USER','组关系用户')}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.status','状态')">
                <a-radio-group
                  v-model="mdl.status"
                  :placeholder="i18n('form.status','状态','select')"
                  v-decorator="['status', {rules: [{required: true, message: i18n('form.status','状态','select')}]}]"
                >
                  <a-radio value="ENABLED">{{i18n('ENABLED','激活')}}</a-radio>
                  <a-radio value="DISABLED">{{i18n('DISABLED','禁用')}}</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>

          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.currPartyName','当前方名称')">
                <a-input
                  :placeholder="i18n('form.currPartyName','当前方名称','input')"
                  v-decorator="['party1', {rules: [{required: true, message: i18n('form.currPartyName','当前方名称','input')}]}]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.relPartyName','关联方名称')">
                <a-input
                  :placeholder="i18n('form.relPartyName','关联方名称','input')"
                  v-decorator="['party2', {rules: [{required: true, message: i18n('form.relPartyName','关联方名称','input')}]}]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item v-show="isShowCurDim" :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.currDimension','当前方维度')">
                <a-select
                  :placeholder="i18n('form.currDimension','当前方维度','select')"
                  v-decorator="['dimId1']"
                  @change="dimChange($event,true)"
                  :options="dimIdData"
                  :getPopupContainer="p=>p.parentNode"
                  :allowClear="true"
                ></a-select>
              </a-form-item>
              <a-form-item v-show="isShowRelDim" :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.relDimension','关联方维度')">
                <a-select
                    :placeholder="i18n('form.relDimension','关联方维度','select')"
                    v-decorator="['dimId2']"
                    :options="dimIdData"
                    :getPopupContainer="p=>p.parentNode"
                    :allowClear="true"
                ></a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item v-show="isShowLevel" :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.level','等级')">
                <a-select :placeholder="i18n('form.level','等级','select')" v-decorator="['level']" :options="rankData"
                          :getPopupContainer="p=>p.parentNode"
                          :allowClear="true"
                ></a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col span="24">
              <a-form-item :labelCol="memo" :wrapperCol="wrapperCol" :label="i18n('form.relationNotes','关系备注')">
                <a-textarea :placeholder="i18n('form.relationNotes','关系备注','input')" v-decorator="['memo']" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </rx-layout>
  </rx-dialog>
</template>
<script>
import { OsDimensionApi } from '@/api/user/org/osDimension'
import osRelTypeApi from '@/api/user/org/osRelType'
import OsRankTypeApi from '@/api/user/org/osRankType'
import { BaseForm, RxDialog,RxLayout } from "@lowcode/jpaas-common-lib"
export default {
  name: 'OsRelTypeEdit',
  mixins: [BaseForm],
  components: {
    RxDialog,
    RxLayout
  },
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      memo: { span: 3 },
      wrapperCol: {
        xs: { span: 23 },
        sm: { span: 16 },
        memo: { span: 1 }
      },
      mdl: {},
      dimIdData: [],
      rankData: [],
      //是否显示当前方维度
      isShowCurDim:false,
      //是否显示关联方维度
      isShowRelDim:false,
      //是否显示等级
      isShowLevel:false
    }
  },
  beforeCreate() {},
  created () {
    this.initDim()
    this.dimChange(this.mdl.dimId1,false)
  },

  methods: {
    i18n(name,text,key){
          return this.$ti18(name,text,"osRelType",key);
    },
    typeChange(val){
        this.form.setFieldsValue({dimId1: null})
        this.form.setFieldsValue({dimId2: null})
        this.form.setFieldsValue({level: null})
        this.isShow(val)
    },
    isShow(relType){
        if (relType=='GROUP-GROUP'){
            this.isShowCurDim=true;
            this.isShowRelDim=true;
            this.isShowLevel=true;
        }else if(relType == 'USER-USER' || relType == 'REL-USER'){
            this.isShowCurDim=false;
            this.isShowRelDim=false;
            this.isShowLevel=false;
        }else if(relType =='GROUP-USER'){
            this.isShowCurDim=true;
            this.isShowRelDim=false;
            this.isShowLevel=true;
        }
    },
    dimChange (value,flag) {
      console.log(value);
      const params={params:{Q_DIM_ID__S_EQ:value}}
      OsRankTypeApi.query(params).then(res =>{
        this.rankData=res.data.map(rank => ({
          title: rank.name,
          value: rank.level
        }))
          if(flag) {
              this.form.setFieldsValue({level: null})
          }
      })
    },
     initDim(){
      const self=this
      OsDimensionApi.getDimList().then(resp =>{
        const data=resp.data.map(dim => ({
          title: dim.name,
          value: dim.dimId
        }))
        self.dimIdData=data
      })
    },
    onload_(data){
      this.mdl = Object.assign({status:'ENABLED',isTwoWay:'YES',isSystem:'NO',isDefault:'YES'});
      this.form.setFieldsValue(this.mdl)
      if (data) {
          let relType = data.relType;
          this.isShow(relType)
      }
    },
    get(id) {
      return osRelTypeApi.get(id)
    },
    save(values) {
      return osRelTypeApi.save(values)
    }
  }
}
</script>
